/*
 * Make the context-menu navigation items vertical
 *
 * Contributor(s): MrOtherGuy
 */

/* Set the container vertical and disable the its pointer events */
#contentAreaContextMenu #context-navigation:not([hidden]) {
  -moz-box-orient: vertical !important;
  position:absolute !important;
  background-color: transparent !important;
  pointer-events: none;
}

/* Enable individual buttons' pointer-events which would otherwise be disabled through cascade */
#contentAreaContextMenu #context-navigation:not([hidden]) menuitem {
  pointer-events: auto !important;
  position:absolute !important;
}

/* Move all context-menu entries right except the navigation items */
#contentAreaContextMenu #context-navigation:not([hidden]) ~ * {
  margin-left: 38px !important;
}

/* Hardcode the elements' heights in case they are different on some platforms */
#contentAreaContextMenu #context-navigation:not([hidden]) ~ menu,
#contentAreaContextMenu #context-navigation:not([hidden]) ~ menuitem {
  min-height:24px !important;
  height:24px !important;
}

/* Get rid of now unimportant separator */
#context-sep-navigation {
  display:none;
}

/* Move text leftwards - not the whole elements */
#contentAreaContextMenu #context-navigation:not([hidden]) ~ menuitem > .menu-text,
#contentAreaContextMenu #context-navigation:not([hidden]) ~ menu > .menu-text {
  margin-left: -20px !important;
  padding-inline-start: 30px !important;
}

/* Move menuitems up. Will fail if save-page item is for some reason not the topmost */
#contentAreaContextMenu #context-navigation:not([hidden]) ~ #context-savepage,
#contentAreaContextMenu #context-navigation:not([hidden]) ~ #context-sep-navigation + menuitem[generateditemid] {
  margin-top: -146px !important;
}

/* There can be generated menuitems such as Edit-page that appears on MDN so need to handle them */
#contentAreaContextMenu #context-navigation:not([hidden]) ~ menuitem[generateditemid] ~ #context-savepage {
  margin-top: unset !important;
}

/*
* This is needed because it is necessary to adjust the bottom * margin of last
* ENABLED element. So create a pseudo-element which will always be last and set
* it's margin.
*/
#contentAreaContextMenu .scrollbox-innerbox::after {
  content: "";
  position: absolute;
  margin-bottom:124px;
  visibility: hidden;
}

/* At this point there's a rather big bottom margin which then causes overflow buttons to appear */
#contentAreaContextMenu autorepeatbutton {
  display:none;
}

/*
 * Get rid of the margin when navigation buttons are disabled. Watching
 * collapsed attribute of autorepeatbutton is only way to track such case
 */
#contentAreaContextMenu autorepeatbutton[collapsed] ~ .arrowscrollbox-scrollbox .scrollbox-innerbox::after {
  display:none;
}

/* Also disable the margin on sub-menus unconditionally */
#contentAreaContextMenu menupopup .scrollbox-innerbox::after {
  display: none;
}

/* You could scroll the menu without this - safe to remove if that's not a problem */
#contentAreaContextMenu .scrollbox-innerbox {
  overflow: hidden;
}
